<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>PHS编带校检</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">	
    <link rel="stylesheet" href="./4/lumen/bootstrap.css" media="screen">
    <link rel="stylesheet" href="./_assets/css/custom.min.css">
  </head>
  <body>
  <div class="container">
	<form>
	  <fieldset>
		<legend>PHS编带校检</legend>
		
		<div class="form-group row">
		  <label class="col-sm-2 col-form-label" for="inputDefault">請掃二維碼:</label>
		  <div class="col-sm-6">
		  <input class="form-control" placeholder="AN1811074-X 35M5 4" id="box" type="text">
		  </div>
		</div>
		<!-- 插入图片 -->
		<!-- <div class="col-sm-4"> -->
			<!-- <img id="RGY" src="./picture/YELLOW.jpg",alt="图片不可用"/> -->
		<!-- </div> -->
		<canvas id="RGY" width="200" height="200" style="border:1px solid #c3c3c3;">
		您的浏览器不支持画布元素。
		</canvas>

		<script type="text/javascript">

		var c=document.getElementById("RGY");
		var cxt=c.getContext("2d");
		cxt.fillStyle="#FFFF00";
		cxt.beginPath();
		cxt.arc(100,100,100,0,Math.PI*2,true);
		cxt.closePath();
		cxt.fill();

		</script>
		
		
		<div class="form-group row">
		    <label for="staticEmail" class="col-sm-2 col-form-label">①工单号:</label>
		    <div class="col-sm-6 col-sm-offset-4">
				<input readonly="" class="form-control-plaintext" id="disk1" value="" type="text">
		    </div>
		</div>
		<div class="form-group row">
		  <label for="staticEmail" class="col-sm-2 col-form-label">②色区:</label>
		  <div class="col-sm-6 col-sm-offset-4">
			<input readonly="" class="form-control-plaintext" id="disk2" value="" type="text">
		  </div>
		</div>
		<div class="form-group row">
		  <label for="staticEmail" class="col-sm-2 col-form-label">③Bin:</label>
		  <div class="col-sm-6 col-sm-offset-4">
			<input readonly="" class="form-control-plaintext" id="disk3" value="" type="text">
		  </div>
		</div>
		
		<div class="form-group row">
			<label class="col-sm-2 col-form-label" for="inputDefault">請掃入需要校验的二维码:</label>
			
			<div class="col-sm-8">
				<input class="form-control" placeholder="Default input" id="diskNow" type="text">
			</div>
			
			<div class="col-sm-2">
				<p class="lead">
				<a class="btn btn-primary btn-lg" onclick="myFunction()" role="button">清线</a>
				</p>
			</div>
		</div>		
		
	</form>	
	<p class="lead">
		<a class="btn btn-primary btn-lg" href="index.html" role="button">返回</a>
	</p>
	
	</div>
    <script src="./_vendor/jquery/dist/jquery.min.js"></script>
    <script src="./_vendor/popper.js/dist/umd/popper.min.js"></script>
    <script src="./_vendor/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="./_assets/js/custom.js"></script>
	<script>
	var disks;
	var cks=new Array(3);
		$("#box").keypress(function(e){    //
		  console.log($("#box").val());
			$(disk1).css('color', 'black');
			$(disk1).val("");
			$(disk2).css('color', 'black');
			$(disk2).val("");
			$(disk3).css('color', 'black');
			$(disk3).val("");
			var key = e.which;
			if (key == 13) { 
				disks=$("#box").val().split(" ");
				$(disk1).val(disks[0]);
				$(disk2).val(disks[1]);
				$(disk3).val(disks[2]);
				
			$( "#diskNow" ).focus();
			}
		});	
		
		$("#diskNow").keypress(function(e){
		  console.log($("#diskNow").val());

		  dk=$("#diskNow").val();
		  var key = e.which;
		  if (key == 13) 
		  { 
				if ($("#box").val()==$("#diskNow").val())
				{
					cxt.fillStyle="#00FF00";//document.getElementById("RGY").src="./picture/GREEN.jpg";//$("#RGY").attr("src","./picture/GREEN.jpg");
				}else{
					cxt.fillStyle="#FF0000";//document.getElementById("RGY").src="./picture/RED.jpg";//$("#RGY").attr("src","./picture/RED.jpg");
				}
				
				$( "#diskNow" ).select();
			}
		  });	
	</script>
	
	<script>
		function myFunction(){
			$(disk1).css('color', 'black');
			$(disk1).val("");
			$(disk2).css('color', 'black');
			$(disk2).val("");
			$(disk3).css('color', 'black');
			$(disk3).val("");
			$(diskNow).css('color', 'black');
			$(diskNow).val("");
			cxt.fillStyle="#FFFF00";//document.getElementById("RGY").src="./picture/YELLOW.jpg";//$("#RGY").attr("src","./picture/YELLOW.jpg");
			$( "#box" ).val("");
			$( "#box" ).focus();
			
		};
	</script>
	
  </body>
</html>
